import React, { useState } from "react";
import classNames from "classnames";

export enum AlertType {
  Success = "success",
  Default = "default",
  Danger = "danger",
  Waring = "waring",
}

interface AlertProps {
  title?: string;
  alertType?: string;
  children: React.ReactText; // React.ReactNode 一定要用children命名？
  showClose?: boolean;
  onClose?: React.MouseEventHandler;
}

const Alert: React.FC<AlertProps> = (props) => {
  const [isShow, setShow] = useState(true);
  const { alertType, children, title, showClose, onClose } = props;
  const classname = classNames("alert", {
    [`alert-${alertType}`]: !!alertType,
  });

  const closeAlert = (e:React.MouseEvent) => {
    setShow(!isShow);
    if (onClose) {
      onClose(e);
    }
  };
  if (title) {
    return (
      <div className={classname} style={{ display: isShow ? "block" : "none" }}>
        {showClose ? (
          <span onClick={closeAlert} className="alert-close">
            关闭
          </span>
        ) : (
          <></>
        )}
        <span className="alert-title">{title}</span>
        <div className="alert-info">{children}</div>
      </div>
    );
  } else {
    return (
      <div className={classname}>
        {showClose ? <span className="alert-close">关闭</span> : <></>}
        <div className="alert-info">{children}</div>
      </div>
    );
  }
};

Alert.defaultProps = {
  alertType: AlertType.Default,
  showClose: true,
};

export default Alert;
